<template>
    <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '120px' } }"
        :wrapper-col="{ style: { width: 'calc(100% - 130px)' } }" ref="form" :model="formData" :rules="rules">
        <div class="form-panel borker-page">

            <a-form-model-item class="yuan-form-item" label="所属单位" prop="placeUnit">
                <a-input class="yuan-form-input" v-model="formData.placeUnit" placeholder="请输入"></a-input>
            </a-form-model-item>
            <div class="clear-both"></div>
            <a-form-model-item style="width:100%" label="能力等级" prop="capabilityLevel">
                <a-radio-group v-model="formData.capabilityLevel">
                    <a-radio value="初级技术经纪人">初级技术经纪人</a-radio>
                    <a-radio value="中级技术经纪人">中级技术经纪人</a-radio>
                    <a-radio value="高级技术经纪人">高级技术经纪人</a-radio>
                </a-radio-group>
            </a-form-model-item>
            <div class="clear-both"></div>
            <a-form-model-item label="相关证书、证明" class="yuan-form-item" v-if="pageReady" prop="certificate">
                <UploadVue :uploadLength="3" @uploadChange="uploadChangeCertificate"
                    :defImgList="formData.certificate?formData.certificate:[]" />
                <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
            </a-form-model-item>
            <div class="clear-both" style="margin-top:10px"></div>
            <a-form-model-item class="yuan-form-row" label="简介" prop="skillBriefIntroduction">
                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                    v-model="formData.skillBriefIntroduction" placeholder="请输入简介" :maxLength="1000" />
            </a-form-model-item>

            <div style="margin:20px 0">
                <div class="case-list" v-for="(item,index) in caseList">
                    <div class="case-title">从业案例{{index+1}}</div>
                    <a-form-model-item class="yuan-form-item yuan-form-col5" label="项目名称">
                        <a-input class="yuan-form-input" v-model="item.name" placeholder="请输入"></a-input>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-item yuan-form-col5" label="日期">
                        <a-date-picker class="yuan-form-input" placeholder="预计完成时间" v-model="item.date" inputReadOnly
                            valueFormat="YYYY-MM-DD" />
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-item yuan-form-col5" label="转化类型">
                        <a-input class="yuan-form-input" v-model="item.type" placeholder="请输入"></a-input>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-item yuan-form-col5" label="促成转化金额">
                        <a-input class="yuan-form-input" v-model="item.money" placeholder="请输入"></a-input>
                        <span> 万元</span>
                    </a-form-model-item>
                    <div class="case-btn-box">
                        <a-button class="case-btn" type="primary" @click="addCase">新增</a-button>
                        <a-button class="case-btn" type="danger" @click="delCase(index)" v-if="caseList.length>=2">删除</a-button>
                    </div>
                </div>
            </div>

            <a-form-model-item label="相关图片" class="yuan-form-item" v-if="pageReady">
                <UploadVue :uploadLength="3" @uploadChange="uploadChangeSkillCorrelationPicture"
                    :defImgList="formData.skillCorrelationPicture?formData.skillCorrelationPicture:[]" />
                <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
            </a-form-model-item>
        </div>
    </a-form-model>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
@Component({
    name: "dom",
    components: { UploadVue },
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    formData: any = {};
    formLoading = false;
    rules = {
        placeUnit: [{ required: true, message: "请输入所属单位", trigger: "change" }],
        capabilityLevel: [{ required: true, message: "请选择能力等级", trigger: "change" }],
        certificate: [{ required: true, message: "请上传相关证明、文件", trigger: "change" }],
    };
    onClose() {
        //(this.$refs.form as any).resetFields();
        this.$emit("closeDrawer");
    }

    mounted() {
        this.pageReady = true;
    }

    pageReady = false;
    uploadChangeCertificate(e) {
        this.formData.certificate = e.map((item) => item.url);
    }
    uploadChangeSkillCorrelationPicture(e) {
        this.formData.skillCorrelationPicture = e.map((item) => item.url);
    }

    caseList = [{}];
    addCase() {
        this.caseList.push({});
    }
    delCase(index: number) {
        this.caseList.splice(index, 1);
    }
    getInfo() {
        let type = false;
        (this.$refs.form as any).validate(async (valid: boolean) => {
            if (!valid) return false;
            type = true;
        });

        if (type) {
            const data = {
                ...this.formData,
                practitionerCase: this.caseList,
            };
            return data;
        }else{
            return false
        }
    }
}
</script>
<style lang="scss">
.borker-page {
    .case-list {
        background-color: #f7f7f7;
        padding: 10px 15px;
        border-radius: 6px;
        margin-bottom: 10px;
    }
    .case-title {
        font-weight: bold;
        font-size: 15px;
        color: #102040;
    }
    .case-btn-box {
        text-align: right;
        padding-top: 20px;
    }
    .case-btn {
        margin-left: 20px;
    }
}
</style>